<template>
  <div class="sf-pay-container">
    <div class="matchs-detail">
      <div class="match-item" :key="i" v-for="(match, i) in matchList">
        <div class="match-content">
          <div class="match-score">
            {{match.home_team_name}}（主）
            <span
              :class="{win: Number(match.concede_num)>0}"
            >{{match.concede_num}}</span>
            {{match.guest_team_name}}（客）
          </div>
          <div class="match-select">
            <div
              :class="{active: (((selectedMatchs[match.nm_matches_id] || {})[match.issue_num] || {})['sf'] || {})[0] ? 'active' : '', item: true}"
              @click="selectMatch({nm_matches_id: match.nm_matches_id, type: 'sf', issue_num: match.issue_num, i: 0, value: (match.sf[0]||[])[2]})"
            >{{(match.sf[0]||[])[1]+' '+(match.sf[0]||[])[2]}}</div>
            <div
              :class="{active: (((selectedMatchs[match.nm_matches_id] || {})[match.issue_num] || {})['sf'] || {})[1] ? 'active' : '', item: true}"
              @click="selectMatch({nm_matches_id: match.nm_matches_id, type: 'sf', issue_num: match.issue_num, i: 1, value: (match.sf[1]||[])[2]})"
            >{{(match.sf[1]||[])[1]+' '+(match.sf[1]||[])[2]}}</div>
          </div>
        </div>
        <div class="match-info">
          <x-icon type="ios-minus-outline" size="20" @click="delMatch(i)"></x-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    matchList: {
      type: Array
    },
    selectedMatchs: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {
    showDetail(item) {
      item.showDetail = !item.showDetail;
      this.$forceUpdate();
    },
    selectMatch(data) {
      this.$emit("selectMatch", data);
    },
    delMatch(index) {
      const { nm_matches_id } = this.matchList[index];
      this.$delete(this.selectedMatchs, nm_matches_id);
      this.matchList.splice(index, 1);
      // this.setLocalstorage();
    }
  }
};
</script>
<style lang="less">
.sf-pay-container {
  font-size: 0.24rem;
  .matchs-detail {
    background: #fff3f4;
    .match-item {
      display: flex;
      border-bottom: 1px solid #d2d2d2;
      align-items: center;
      .match-info {
        width: 1.2rem;
        padding: 0.2rem;
        color: #202020;
        font-size: 0.24rem;
        text-align: center;
      }
      .match-content {
        width: 100%;
        padding: 0.1rem;
        .match-score {
          text-align: center;
          margin-bottom: 0.1rem;
          span {
            color: #43a63d;
            padding-right: 0.1rem;
            &.win {
              color: #d44743;
            }
          }
        }
        .match-select {
          display: flex;
          .item {
            height: 0.54rem;
            flex: 1;
            text-align: center;
            background: #fff;
            border: 1px solid #d2d2d2;
            border-right: none;
            line-height: 0.54rem;
            font-size: 0.2rem;
            &.active {
              background: #d44743;
              color: #fff;
            }
            &:last-child {
              border-right: 1px solid #d2d2d2;
            }
          }
        }
      }
    }
  }
}
</style>
